<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base href="/">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="../../h-ui/lib/html5shiv.js"></script>
    <script type="text/javascript" src="../../h-ui/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="../../h-ui/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../h-ui/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="../../h-ui/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../h-ui/static/h-ui.admin/skin/red/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="../../h-ui/static/h-ui.admin/css/style.css"/>

    <style type="text/css">
        body{
            overflow: auto;
        }
        .time-table {
            table-layout: fixed;
        }

        .time-table th {
            text-align: center;
            font-weight: bold;
        }

        .time-table caption {
            text-align: center;
            font-size: large;
        }

        .time-table td {
            text-align: center;
            cursor: pointer;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .time-table td.oneline {
            height: 40px;
            line-height: 40px;
        }

        .time-table td.twoline {
            height: 40px;
            line-height: 20px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td colspan="1"></td>
    </tr>
</table>
<div class="page-container">
    <div class="text-c">
        <span class="select-box inline radius">
                <select class="select" id="classId" >
                     <option value="1">班级</option>
                     <option th:each="list:${classlist}" th:value="${list.Cid}" th:text="${list.className }"></option>
                </select>
            </span>
        <span>
            <a class="btn btn-success radius r radius" style="line-height:1.6em;margin-top:3px"
                 href="javascript:location.replace(location.href);" title="刷新">
                    <i class="Hui-iconfont">&#xe68f;</i>
            </a>
        </span>
        <button class="btn btn-success radius" onclick="loadTimetables()">
            <i class="Hui-iconfont">&#xe665;</i> 查询
        </button>
    </div>
    <div class="row  pd-20" >
        <table id="timetables" class="table table-border  table-bordered radius table-striped "
               style="table-layout: fixed;">
        </table>
    </div>
</div>
<script type="text/javascript" src="h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="h-ui/lib/jquery.contextmenu/jquery.contextmenu.r2.js"></script>
<script type="text/javascript" src="h-ui/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="h-ui/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="h-ui/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript">
    // 初始化
    $(function () {
        loadTimetables();
    });
    var weekdays = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
    function loadTimetables() {
        $.ajax({
            type: "post",
            url: "schedule/getScheduleList",
            data: {
                classId: $('#classId').val()
            },
            dataType: "json",
            async: false,
            success: function (result) {
                $('#timetables').empty();
                var maxday = 7;
                var maxpart = 8;
                var timetable = result;

                var str = '';
                str += '<tr class="text-c"><th colspan="8" >' + result[0].class_name + '</th></tr>';
                str += '<tr class="text-c">';
                str += '  <th>节\\星期</th>';
                var weekDay = [];
                for (var day = 0; day < maxday; day++) {
                    var d = day + 1;
                    str += '<th id=day' + d + '>' + weekdays[day] + '</th>';
                }
                str += '</tr>';

                for (var part = 0; part < maxpart; part++) {
                    str += '<tr class="text-c">';
                    str += '  <th>' + (part + 1) + '</th>';
                    for (var day = 0; day < maxday; day++) {
                        // /*nowrap="nowrap"*/换行
                        str += '<td id="t_' + (day + 1) + '_' + (part + 1) + '" height="25dp" style="cursor: pointer ;font-size: 12px" onclick="showEdit(' + (day + 1) + ',' + (part + 1) + ')">-</td>';
                    }
                    str += '</tr>';
                }

                $("#timetables").html(str);

                for (var i = 0; i < timetable.length; i++) {
                    var html = timetable[i].course_name
                        /*+ '<br />' + timetable[i].person_name
                        + '#教室:' + timetable[i].class_room_name*/
                    ;
                    $('#t_' + timetable[i].day + '_' + timetable[i].part).html(html);
                }

            }
        });
    }

    function showEdit(day, part) {
        alert(day + "-" + part)
        //layer_show('修改课表详细', 'manager/timetableDetail/toDetailEdit?classId=' + classId + '&day=' + day + '&part=' + part + '&timetableId=${timetableId}', '400', '320');
    }
</script>
</body>
</html>